<template>
  <div class="home">
    <!-- 英雄区 -->
    <Hero />
    
    <!-- 快速介绍 -->
    <section class="quick-intro section">
      <div class="container">
        <div class="quick-intro__grid">
          <div class="quick-intro__item">
            <ElIcon :size="48" class="quick-intro__icon">
              <Cpu />
            </ElIcon>
            <h3>前端开发</h3>
            <p>精通 Vue、React 等现代前端框架</p>
          </div>
          <div class="quick-intro__item">
            <ElIcon :size="48" class="quick-intro__icon">
              <Brush />
            </ElIcon>
            <h3>UI/UX 设计</h3>
            <p>注重用户体验和界面美观</p>
          </div>
          <div class="quick-intro__item">
            <ElIcon :size="48" class="quick-intro__icon">
              <Odometer />
            </ElIcon>
            <h3>性能优化</h3>
            <p>追求极致的页面加载速度</p>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 精选项目 -->
    <FeaturedProjects />
    
    <!-- CTA 区域 -->
    <section class="cta section">
      <div class="container">
        <div class="cta__content">
          <h2 class="cta__title">让我们一起创造些什么</h2>
          <p class="cta__text">
            如果你有任何项目想法或合作机会，欢迎随时联系我
          </p>
          <ElButton type="primary" size="large" @click="$router.push('/contact')">
            <ElIcon><Message /></ElIcon>
            联系我
          </ElButton>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { Cpu, Brush, Odometer, Message } from '@element-plus/icons-vue'
import Hero from '@/components/sections/Hero.vue'
import FeaturedProjects from '@/components/sections/FeaturedProjects.vue'
</script>

<style lang="scss" scoped>
.quick-intro {
  background: var(--bg-secondary);
  
  &__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: $spacing-xl;
    
    @include respond-to('md') {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  
  &__item {
    text-align: center;
    padding: $spacing-xl;
    background: var(--bg-primary);
    border-radius: $radius-lg;
    @include transition(transform, box-shadow);
    
    &:hover {
      transform: translateY(-8px);
      box-shadow: var(--shadow-xl);
    }
    
    h3 {
      font-size: $font-size-xl;
      margin: $spacing-md 0;
    }
    
    p {
      color: var(--text-secondary);
      margin: 0;
    }
  }
  
  &__icon {
    color: $primary-color;
  }
}

.cta {
  background: linear-gradient(135deg, $primary-color, $secondary-color);
  color: white;
  
  &__content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
  }
  
  &__title {
    font-size: $font-size-3xl;
    margin-bottom: $spacing-md;
    color: white;
    
    @include respond-to('md') {
      font-size: $font-size-4xl;
    }
  }
  
  &__text {
    font-size: $font-size-lg;
    margin-bottom: $spacing-xl;
    opacity: 0.9;
  }
}
</style>

